import React, {Component} from 'react';
import {
    StyleSheet,
    AppRegistry,
    Image,
    
} from 'react-native';

import {
    TabNavigator,
    StackNavigator
} from 'react-navigation';

import Home from './guan'
import Find from './guan'
import Message from './guan'
import Me from './guan'
      const Hometab =StackNavigator({
        Home:{
            screen: Home,
            navigationOptions:{
                header:null
              }
        }
    });
        
        const Tabs = TabNavigator(
            {
                Hometab: {
                    screen: Hometab,
                    navigationOptions: {
                        tabBarLabel: '首页',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./img/palace_list_arch_btn_2x.png')}/>,
                    }
                },

                Find: {
                    screen: Hometab,
                    navigationOptions: {
                        tabBarLabel: '紫微宫',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./img/palace_list_mus_btn_2x.png')}
                        />,
                    }
                },

                Message: {
                    screen: Hometab,
                    navigationOptions: {
                        tabBarLabel: '紫薇城',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./img/tumblr-link.png')}
                        />,
                    }

                },

                Me: {
                    screen: Hometab,
                    navigationOptions: {
                        tabBarLabel: '我的',
                        tabBarIcon: ({tintColor}) => <Image
                            style={[styles.tabBarImage, {tintColor: tintColor}]}
                            source={require('./img/tumblr-photo.png')}
                        />,
                    }
                }
            },
            {
                animationEnabled: true,
                tabBarPosition: 'bottom',
                swipeEnabled: true,
                backBehavior: 'none',
                tabBarOptions: {
                    iconStyle: {height: 32,},//图标样式
                    activeTintColor: 'orange',//选种颜色
                    inactiveTintColor: 'gray',//未选中颜色
                    showIcon: true,
                    indicatorStyle: {
                        height: 0,
                    },
                    style: {backgroundColor: '#CCCCCC',},
                    tabStyle: {height: 50,},
                    labelStyle: {fontSize: 12,marginBottom: 8,},
                    pressColor: 'gray',
                    pressOpacity: 0.8,
                    upperCaseLabel: false,
                },

            }
        )



const styles = StyleSheet.create({

    tabBar: {
        backgroundColor: '#CCCCCC',
    },
    tabBarItem: {
        height: 50,
    },
    tabBarImage: {
    width: 28,
    height: 28,
    marginTop: 15,
    },
    tabBarIcon: {
        height: 32,
    },

    tabBarLabel: {
        fontSize: 12,
        marginBottom: 8,

    },

})
export default Tabs;


